<!DOCTYPE html>
<head>
    <title>我的第五个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <h1>事件处理</h1>
    <p>-----------监听事件---------------</p>
    <div id="d1">
        <button v-on:click="counter += 1">Add 1</button>
        <p>按钮按了 {{counter}} 次数</p>
    </div>  
    <br/>
    <div id="d2">
        <button v-on:click="hello">问候</button>
    </div>  

    <br/><br/>
    <p>-----------内联处理器中的方法---------------</p>
    <div id ="example-3">
        <button v-on:click="say('hi')">say hi</button>
        <button v-on:click="say('what')">say what</button>
        <button v-on:click="warn('from cannot be submitted yet.',$event)"> submit </button>
    </div>
    <p>-----------事件修饰符---------------</p>
    <!-- 阻止单击事件继续传播 -->
    <p>阻止单击事件继续传播</p>
    <a v-on:click.stop="doThis" target="_blank" href="https://www.baidu.com">aaa</a>

    <!-- 提交事件不再重载页面 -->
    <p>提交事件不再重载页面</p>
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <p>修饰符可以串联</p>
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <p>只有修饰符</p>
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <p>添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理</p>
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <p>只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的</p>
    <p>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。</p>
    <div v-on:click.self="doThat">...</div>


    <!-- 点击事件将只会触发一次 -->
    <p>点击事件将只会触发一次</p>
    <a v-on:click.once="doThis" href="">but</a>

    <br/><br/>
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">
        滚动事件的默认行为 (即滚动行为) 将会立即触发, 
        <br/>而不会等待 `onScroll` 完成
        <br/>这其中包含 `event.preventDefault()` 的情况
        <br/> 这个 .passive 修饰符尤其能够提升移动端的性能。
        <br/>不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，
        <br/>同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
    </div>
    <br/><br/>



    <p>------按键修饰符-----</p>
    <p>在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：</p>
    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <p>输入框1：</p>
    <input id="input1" v-on:keyup.enter="submit">
    <br/>

    <p>输入框2：</p>
    <input v-on:keyup.page-down="onPageDown">
    <p>你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。</p>
    <br/><br/>




    <!-- Alt + C -->
    <input v-on:keyup.alt.67="clear">

    <!-- Ctrl + Click -->
    <div v-on:click.ctrl="doSomething">Do something</div>


</body>
<script>
    var vm1 = new Vue({
        el:'#d1',
        data:{counter:0}
    })


    var vm2 = new Vue({
        el:'#d2',
        data:{
            name:"vue.js"
        },
        methods:{
            hello:function(event){
                // `this` 在方法里指向当前 Vue 实例
                alert("hello world"+this.name)
                 // `event` 是原生 DOM 事件
                if(event){
                    console.log("事件名:"+event.target.tagName)
                }
            }
        }
    })
    // 也可以用 JavaScript 直接调用方法
    //vm2.hello()




    var vm3 = new Vue({
        el:'#example-3',
        data:{
        },
        methods:{
            say:function(message){
                console.log(message)
            },
            warn:function(message,event){
                if(event){
                    console.log('event')
                    event.preventDefault()
                }
                console.log(message)
            }
        }
    })

    var vm4 = new Vue({
        el:'#input1',
        data:{
        },
        methods:{
            submit:function(){
                console.log("input submit")
            }
        }
    })


</script>
</html>